<template>
    <view class="post-body" @click="ifLogin">
      <!-- 搜索框区域 -->
      <view class="search-box">
        <uni-search-bar @confirm="search" @cancel="cancalSearch" :radius="100" cancelButton="auto" maxlength="10" bgColor="#FFFFFF" placeholder="查找"></uni-search-bar>
      </view>
      <!-- 顶部操作区域 -->
        <view class="post-top">
          <view class="post-button">
            <view v-if="!radioFlag" @click="pagePost" class="post-button-item1">
              <image src="https://s2.loli.net/2022/05/07/jNFfvuBJ3UsReVr.png" mode=""></image>
              <text>发布</text>
            </view>
            <view v-else class="">
              <radio :checked="select" color="#FFCA46" v-if="radioFlag" @click="changeCheck"></radio>
            </view>
          </view>
          <view class="post-button">
            <view class="post-button-item1" @click='manageList' v-if="!radioFlag">
              <image src="https://s2.loli.net/2022/05/07/8iyPVmqOX27Fzth.png" mode=""></image>
              <text>管理</text>
            </view>
            <view class="post-button-item" v-else>
              <view class="post-button-item1" @click='showDeleteModal' >
                <image src="https://s2.loli.net/2022/05/22/hit8acDFonYkTWS.png" mode=""></image>
                <text>删除</text>
              </view>
              <view class="post-button-item1" @click='cancelManage'>
                <image src="https://s2.loli.net/2022/05/07/Ox1DVeJuM2FBQ8d.png" mode=""></image>
                <text>取消</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 消息区域 -->
        <view class="post" v-if="postList.length !== 0">
          <view class="post-item" v-for="(item,i) in postitem" :key="i">
            <view class="">
              <user-post :postItem="item" :show-radio='radioFlag' @radio-change='radioChangeHandler' @goto-item="gotoPostItem"></user-post>
            </view>
          </view>
        </view>
        <view class="nullimage" v-else>
          <image src="https://s2.loli.net/2022/05/05/r2qiah46pZPYK1O.png" mode=""></image>
          <text>空空如也</text>
        </view>
    </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return { 
          flag: 0,
          // HH: '',
          select: false,
          searchList: [],
          searchStr: [],
          postList: [],
          postListId: [],
          page: 1,
          options: [{
            text: "删除",
            style: {
              backgroundColor: '#333333'
            }      
          }],
          radioFlag: false
			};
		},
    computed:{
      ...mapState('user_module',['userinfo','isLogin']),
      ...mapState('postitem_module',['postitem','deleteId'])
    },
    onLoad() {
      if(this.isLogin) {
        this.getPostList()
        this.postList = []
        this.postList = this.postitem        
      }
    },
    onShow() {
      if(this.isLogin) {
        this.postList = []
        this.postList = this.postitem
        this.getPostList()
        uni.$setBadge()
        // uni.$tokenTest()
      }
    },
    methods: {
      ...mapMutations('user_module',['showLoginInfo']),
      ...mapMutations('postitem_module',['updatePostItem','removePostItemById','updateState','selectDelectId','clearDeleteId','changeChecked']),
      async search(e) {
        this.searchStr = e.value
        const {data:{data:{page:{records:res}}},data:info} = await uni.$http.post('/api/task/oweKeySearch/' + this.page, this.searchStr).catch(err => uni.$showMsg('网络错误！'))
        if(info.code !== 200) return uni.$showMsg()
        this.updatePostItem(res.reverse())
        this.postList = this.postitem
      },
      cancalSearch() {
        this.getPostList()
      },
      changeCheck() {
        this.select = !this.select
        this.changeChecked(this.select)
      },
      onPullDownRefresh() {
        let timer = null   
        this.getPostList()
        clearTimeout(timer)
        timer = setTimeout(() => {
            uni.stopPullDownRefresh()  
        },1000)
      },
      pagePost() {
        if(this.isLogin) {
          uni.navigateTo({
            url: '../../subpkg/post/post'
          })
        } else {
          this.showLoginInfo()
        }
      },
      ifLogin() {
        if(!this.isLogin) {
          this.showLoginInfo()
        }
      },
      // 获取任务信息
      async getPostList() {
        this.flag = true
        const {data:{data:{message:res}}} = await uni.$http.post('/api/task/getRelease').catch(err => uni.$showMsg('网络错误！'))
        let a = res
        //过滤null
        a = a.filter(item => item !== null)
        this.updatePostItem(a.reverse())
        this.postList = this.postitem
      },
      // 跳转到任务详情页
      gotoPostItem(id) {
        uni.navigateTo({
          url: '../../subpkg/postitem/postitem?id=' + id 
        })
      },
      // 删除时提示信息
      showDeleteModal() {
        uni.showModal({
          title: '提示',
          content: '是否删除选中内容',
          success: res => {
            if (res.confirm) {
                this.batchDelete()
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
          },
          fali: err => uni.$showMsg('删除失败，请稍后重试！')
        })
      },
      // 批量删除
      async batchDelete() {
        this.selectDelectId()
        const {data:info} = await uni.$http.post('/api/task/removeByIdList',this.deleteId).catch(err => uni.$showMsg('网络错误！'))
        if(info.code !== 200) return uni.$showMsg('删除失败，请稍后重试！')
        this.clearDeleteId()
        this.getPostList()
        this.postList = this.postitem
        if(this.radioFlag) {
          this.radioFlag = false
          this.select = false
        }
      },
      manageList() {
        this.radioFlag = true
      },
      cancelManage() {
        this.radioFlag = false
      },
      radioChangeHandler(e) {
        this.updateState(e)
      }
    }
	};
</script>

<style lang="scss">
    .nullimage {
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      padding: 50% 0;
      text {
        font-size: 14px;
        color: #A5A5A5;
      }
      image {
        width: 160rpx;
        height: 120rpx;
      }
    }
    .post-body {
      .search-box {
        position: sticky;
        top: 0;
        z-index:999;
        // background-color: #FFFFFF;
        background-image: linear-gradient(to right , #FCFCF0, #FFFAE8);
      }
      .post-top {
        position: sticky;
        top: 56px;
        z-index: 999;
        margin: 8px 8px 0 8px;
        border: 1px solid #FFFFFF;
        border-radius: 8px;
        background-color: #FFFFFF;
        // background-image: linear-gradient(to right , #FCFCF0, #FFFAE8);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .post-button {
          margin: 5px 5px;
          display: flex;
          // flex-direction: column;
          justify-content: center;
          align-items: center;
          .post-button-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          image {
            width: 25px;
            height: 25px;
          }
        }
      }
      .post-button-item1 {
        margin: 0 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
</style>